import { Card, Row, Col, Checkbox, Divider } from "antd";
import axios from "axios";
import { useEffect, useState } from "react";

export default function Home() {
  let getall = () => {
    axios({
      method: "get",
      url: "http://127.0.0.1:5000/orders/orders",
      // data: { token },
      // params: { page }
    }).then((res) => {
      let {data}=res.data
      console.log(data)
      let fwl=data.length
      let jin=data.filter((ele)=>{
        return ele.status=='未支付'
      })
      jin=jin.length
      let zhl=(jin/fwl*100).toFixed(1)+'%'
      let state=[...statsData]
      state[0].value=(jin).toLocaleString('en-US')
      state[1].value=(fwl).toLocaleString('en-US')
      state[2].value=(zhl)
      state[3].value='￥'+(jin*30).toLocaleString('en-US')
      setStatsData(state)
    });
  };
  useEffect(()=>{
    getall()
  },[])
  const [statsData,setStatsData] = useState([
    { title: "今日订单数", value: "1,234", color: "#1890ff" },
    { title: "今日访问量", value: "5,678", color: "#52c41a" },
    { title: "转化率", value: "12.3%", color: "#faad14" },
    { title: "收入总览", value: "¥89,560", color: "#f5222d" },
  ]);

  const todoItems = [
    { label: "用户管理", checked: false },
    { label: "订单管理", checked: true },
    { label: "财运分析", checked: false },
  ];

  const importantItems = ["重要趋势", "营销脉络", "下一脉段", "时间"];

  return (
    <div className="dashboard">
      <Row gutter={16}>
        {statsData.map((item, index) => (
          <Col xs={24} sm={12} md={6} key={index}>
            <Card className="dashboard-card">
              <h3>{item.title}</h3>
              <div className="stat-number" style={{ color: item.color }}>
                {item.value}
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={16} style={{ marginTop: 24 }}>
        <Col xs={24} md={12}>
          <Card title="书星高照，财运亨通" className="dashboard-card">
            <div className="todo-list">
              {todoItems.map((item, index) => (
                <Checkbox
                  key={index}
                  checked={item.checked}
                  style={{ display: "block", margin: "8px 0" }}
                >
                  {item.label}
                </Checkbox>
              ))}
            </div>
          </Card>
        </Col>

        <Col xs={24} md={12}>
          <Card title="重要速度" className="dashboard-card">
            {importantItems.map((item, index) => (
              <div
                key={index}
                style={{ padding: "8px 0", borderBottom: "1px solid #f0f0f0" }}
              >
                <Checkbox>{item}</Checkbox>
              </div>
            ))}
          </Card>
        </Col>
      </Row>
    </div>
  );
}
